<template>
	<Layout :showBack="true">
		<template #title>消息详情</template>
		<view class="iflex jcc fill ">
			<view class="iflex column message-item">
				<view class="iflex fill message-item__header">
					{{detail.title}}
				</view>
				<view class="iflex fill message-item__time">
					{{detail.createTime}}
				</view>
				<view class="iflex fill message-item__content">
					{{detail.msgContent}}
				</view>
			</view>
		</view>
	</Layout>
</template>

<script lang="ts" setup>
	import { setTabbar } from '@/utils/wx';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import type { AnyObj } from '@/types/global';
	import { getMessageDetail, saveMessageMarkAsRead } from '@/apis/message';

	let id = '';
	const detail = ref<AnyObj>({});
	function loadData() {
		getMessageDetail(id).then((res) => {
			detail.value = res.data ?? {};
		});
	}

	onLoad((options) => {
		options = options as { id : string; };
		id = options.id;

		saveMessageMarkAsRead(id).then(() => {
			//
		});

		loadData();
	})
</script>

<style scope lang="scss">
	.message-item {
		width: 678rpx;
		margin-top: 20rpx;
		padding: 38rpx 28rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		background: #FFF;

		&__header {
			color: #000000;
			font-size: 36rpx;
			font-weight: 500;
		}

		&__time {
			padding: 11rpx 0 17rpx 0;
			color: #7e7e7e;
			font-size: 24rpx;
			font-weight: 400;
		}

		&__view-detail {
			padding-top: 48rpx;
			color: #000000;
			font-size: 24rpx;
			font-weight: 400;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
</style>